<template>
  <div class="chart-wrapper">
    <v-chart :option="chartOptions" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import VChart from 'vue-echarts';

// 定义props
const props = defineProps({
  chartId: {
    type: String,
    required: true
  },
  options: {
    type: Object,
    default: () => ({})
  }
});

// 图表配置
const chartOptions = ref({
  title: {
    text: '仪表盘',
    left: 'center'
  },
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: '业务指标',
      type: 'gauge',
      detail: {
        valueAnimation: true,
        formatter: '{value}%',
        color: 'inherit'
      },
      data: [{ value: 75, name: '完成率' }],
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisLabel: {
        color: 'inherit',
        distance: 40,
        fontSize: 12
      }
    }
  ]
});

// 将传入的options合并到默认配置
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    Object.assign(chartOptions.value, newOptions);
  }
}, { immediate: true });
</script>

<style scoped>
.chart-wrapper {
  width: 100%;
  height: 100%;
}
</style> 